//对象属性拦截
function defineReactive(obj, key, value) {
  observe(value)
  Object.defineProperty(obj, key, {
    get() {
      return value
    },
    set(newValue) {
      console.log('设置属性')
      value = newValue
      // updated()
    },
  })
}
//拦截对象的所有属性
function observe(obj) {
  if (typeof obj !== 'object' || obj === null) return
  for (const [key, value] of Object.entries(obj)) {
    defineReactive(obj, key, value)
  }
}

let article = {
  title: 'yahoo',
  content: '一个好网站',
  author: '李四',
  news: {
    description: '文章介绍',
  },
}

observe(article)
//更新视图数据
function updated() {
  let viewContent = document.body.innerHTML
  for (const [key, value] of Object.entries(article)) {
    viewContent = viewContent.replace(`@${key}`, value)
  }
  document.body.innerHTML = viewContent
}

const input = document.querySelector('input')
input.addEventListener('input', function () {
  article.news.description = this.value
  // article.news.description = this.value
  // article[this.name] = this.value
})
